:root {
  --statusbar-height: 40px;
  --module-box-bg-color: #00000005;
  --module-box-radius: 2rem;
  --box-bg-white-opacity-1: #ffffff10;
  --color-white-opacity-second: #ffffff88;
  --primary-color: rgb(13, 132, 255);

  --text-color-1: #181818;
  --text-color-2: #2c2c2c;
  --text-color-3: #4b4b4b;
  --text-color-4: #777777;
  --text-color-5: #a6a6a6;
  --text-color-6: #dddddd;
  --text-color-7: #e8e8e8;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 10px;
  letter-spacing: .1rem;
}

.g-page {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  padding-top: var(--statusbar-height);
}

.g-center, .g-center-vh {
  display: flex;
  justify-content: center;
  align-items: center;
}

.g-center-v {
  display: flex;
  align-items: center;
}

.g-center-v {
  display: flex;
  justify-content: center;
}

.g-center-abs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.g-module-box {
  border-radius: var(--module-box-radius);
  background-color: var(--module-box-bg-color);
  padding: 2rem 0;
  margin: 2rem;
}

.g-undisplay {
  display: none;
}